import { Component, OnInit } from '@angular/core';

//导入Heor类
import {Hero} from '../hero';
import {HEROES} from '../mock-heroes';
import {HeroService} from '../hero.service';

/* 当使用ng generate component Heroes
后，会自动创建Heroes 组件
并自动加到AppModule中
*/

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  private heroService:HeroService;

  //ng会通过依赖注入HeroService对象
  constructor(heroService:HeroService) {
      this.heroService = heroService;
   }

  ngOnInit() {
    //ngOnInit是一个钩子，ng在组件初始化过程会调用这个方法
    //同步获取
    //this.heroes = this.heroService.getHeroes();

    //异步获取
    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
  }

  hero:Hero={
    id:1,
    name:"windstorm"
  };

  //组件不应该关注数据从哪里来，到哪里去
  //这是服务应该做的事情 
  // heroes=HEROES;
  heroes:Hero[];

  // selectedHero:Hero;
  // onSelect(hero:Hero){
  //   this.selectedHero=hero;
  // }
}
